<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>资料录入</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm.min.css">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm-extend.min.css">
    <link rel="stylesheet" href="/static/wx/css/reset.css">
    <link rel="stylesheet" href="/static/wx/css/main.css">
    <link rel="stylesheet" href="/static/wx/css/public_main.css">
</head>

<body>
<div class="page-group">
    <div class="page page-current" id="filerecord">

        <!-- 主内容 -->
        <div class="content">
            <div class="setp-card">
                <div class="step-box">
                    <div class="step-item selected">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">保单险种</div>
                    </div>
                    <div class="step-item selected">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品信息</div>
                    </div>
                    <div class="step-item selected">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品受损</div>
                    </div>
                    <div class="step-item selected">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品现状</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">物权信息</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">递交授权</div>
                    </div>
                </div>
                <div class="size-65 text-c">
                    以下资料作为法律责任依据请如实填写，<span class="blue">查看模版>></span>
                </div>
            </div>
            <div class="bs-box">
                <div class="bs-box-content">
                    <div class="bs-box-inner">
                        <div class="bs-box-content-item width-link size-m">
                            <div>货品在</div>
                            <div>
                                <input placeholder="请选择受损时间" id="present_at" value="{if isset($info.present_at)}{$info.present_at|substr=0,10}{/if}"/>
                            </div>
                            <div>时的现状情况</div>
                        </div>
                        <div class="bs-box-content-item">
                            <p class="size-m">货品清单(限doc,xlsx,pdf)</p>
                            <div class="uploader">
                                <ul class="uploader-files" id="uploader-files">
                                    <!--<li class="uploader-file"-->
                                        <!--style="background-image:url('http://temp.im/288x288/FF9500/000')">-->
                                        <!--<span class="close">x</span>-->
                                    <!--</li>-->
                                    {if !empty($info.goods_list)}
                                    {volist name="info.goods_list" id="vo"}
                                    <li class="uploader-file" style="background-image:url('/static/wx/imgs/img/text.jpg')">
                                        <span class="close"  onclick='deleteT(this)'>x</span>
                                        <a href="{$vo.url}" download>{$vo.name}</a>
                                    </li>
                                    {/volist}
                                    {/if}
                                </ul>
                                <div class="uploader-content">
                                    <div class="uploader-input-box">
                                        <input class="uploader-input" type="file" accept=".xlsx,.doc,.pdf" onchange="handleInputChange3(event)"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bs-box-content-item">
                            <p class="size-m">货品现状描述</p>
                            <div>
                                <textarea class="size-m no-outline" placeholder="请填写货品现状的详细信息，如：货品的品牌、型号、产地、生成如期" rows="3"
                                          style="width:100%;padding-right:.5rem;" id="goods_desc">{if isset($info.goods_desc)}{$info.goods_desc }{/if}</textarea>
                            </div>
                        </div>
                        <!--{if !empty($info.present_video)}-->
                        <!--{volist name="info.present_video" id="vol"}-->
                        <!--<li class="uploader-file" style="background-image:url({$vol})">-->
                            <!--<span class="close" onclick="deleteT(this)">x</span>-->
                        <!--</li>-->
                        <!--{/volist}-->
                        <!--{/if}-->
                        <div class="bs-box-content-item border-b-none">
                            <p class="size-m">上传视频</p>
                            <div class="uploader">
                                    <div class="uploader-content" id="upload-video">
                                            <ul class="uploader-files" id="uploader-videos">
                                                    <!-- <li class="uploader-file">
                                                            <video id="video" controls="controls" style="width:100%;height:100%;display: none" ></video>
                                                    </li> -->
                                            </ul>
                                        <div class="uploader-input-box">
                                            <!-- <label id="vvv" style="display:block;float:left;width:77px;height:77px"  class="ui_button ui_button_primary" for="upload_video_input"> -->
                                                <!-- <img id="videoImg" style="width: 50px;height: 50px;" src="/static/wx/imgs/img/play.png"> -->
                                                <input  type="file" id="upload_video_input" enctype="multipart/form-data"  name="take-video"class="uploader-input"  accept="video/*" onchange="handleInputChange2(event)">
                                                <video id="video" controls="controls" style="width:100%;height:100%;margin-left:9999px;" >
                                                    <!-- <source src="http://rongyp.oss-cn-shanghai.aliyuncs.com/b7e863dc057c6d54a782a5d7ebc18029.mp4"></source> -->
                                                </video>
                                            <!-- </label> -->
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <div class="bs-box-content-item border-b-none">
                            <p class="size-m">上传图片</p>
                            <div class="uploader">
                                <div class="uploader-content">
                                    <ul class="uploader-files" id="uploader-imges">
                                        {if !empty($info.present_img)}
                                        {volist name="info.present_img" id="vo"}
                                        <li class="uploader-file" style="background-image:url({$vo})">
                                        <span class="close" onclick="deleteT(this)">x</span>
                                        </li>
                                        {/volist}
                                        {/if}
                                    </ul>
                                    <div class="uploader-input-box">
                                        <input class="uploader-input" type="file" accept="image/*" onchange="handleInputChange1(event)"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" value="{$policy_num}" name='policy_num'>
            <div class="btn-box" style="margin-top: 1rem;">
                <div class="flex">
                    <div class="pre-step my-btn" style="width:47%;" @click="preStep" id="preStep">
                        <span style="background-color: #fff;color:#000;">上一步</span>
                    </div>
                    <div class="pre-step my-btn" style="width:47%" @click="nextStep" id="nextStep">
                        <span class="active">下一步</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script type='text/javascript' src='/static/wx/lib/sui/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/wx/lib/sui/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/wx/lib/sui/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/wx/js/upload.js' charset='utf-8'></script>
<script>
    $(function () {
        var myDate = new Date();
        var year = myDate.getFullYear();//获取年
        var month = myDate.getMonth() + 1;////获取月
        var day = myDate.getDate();//获取日
        var video_poster = ''; // 视频封面
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        var time = year + "-" + month + "-" + day;
        var n = $('.step-box').children().length;
        $('.step-item').css('width', document.body.clientWidth / n + 'px')
        $(document).on('click', '#preStep', function () {
            var poliecy = $("input[ name='policy_num']").val();
            location.href = "{:url('insurer/step3')}?policy_num=" + poliecy;
        });

        $("#present_at").calendar({
            value: [time]
        });
        $(document).on('click', '#preStep', function () {
            var poliecy = $("input[ name='policy_num']").val();
            location.href = "{:url('insurer/step3')}?policy_num=" + poliecy;
        });
        $(document).on('click', '#nextStep', function () {
            var poliecy = $("input[ name='policy_num']").val();
            var present_at = $("#present_at").val()
            var goods_desc = $("#goods_desc").val();
           // console.log($('#uploader-files').find('li'));
            var arr=[];
            var list=[];
            $("#uploader-imges  li").each(function(index){
                var i=0;
                var url=$(this).css('background-image');
                url= url.split('("')[1].split('")')[0];
                arr.push(url);
            })

            $("#uploader-files  li a").each(function(index){
                var url=$(this).attr('href');
                list.push(url);
            })
            $.ajax({
                type: 'POST',
                url: "{:url('insurer/addInsurer')}",
                data: {
                    'policy_num': poliecy,
                    'present_at': present_at,
                    'goods_list': JSON.stringify( list ),//货品清单
                    'goods_desc': goods_desc,
                    'present_img':JSON.stringify( arr ),//货品现状
                    'present_video': 'www.92wukai.com',//货品现状
                    'now_status': 4
                },
                dataType: 'json',
                success: function (Json) {
                    if (Json.code == 200) {
                        location.href = "{:url('insurer/step5')}?policy_num=" + Json.data.policy_num;
                    } else {
                        $.alert('保存失败');
                    }
                }
            });
        });
        $(document).on('click', '.blue', function () {
            location.href="{:url('index/test4')}"
        })
    });
    //获取视频文件
    function selectVideoFile(file){
        var getUrl = null;
        if (window.createObjectURL != undefined) { // basic
            getUrl = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            getUrl = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
    }
    //设置视频封面
     function setMedia(video, scale = 0.8) {
        // 设置poster属性：（非本地视频资源会有跨域截图问题）
        video.addEventListener('loadeddata', function(e) {
            // 拿到图片
            let canvas = document.createElement('canvas');
            canvas.width = video.videoWidth *scale;
            canvas.height = video.videoHeight *scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let src = canvas.toDataURL('image/png');
            video_poster = src

        });
     }
    
     function getBlobBydataURI(dataURI,type) { 
      var binary = atob(dataURI.split(',')[1]); 
      var array = []; 
      for(var i = 0; i < binary.length; i++) { 
        array.push(binary.charCodeAt(i)); 
      } 
      return new Blob([new Uint8Array(array)], {type:type }); 
    } 
    //获取对象
    function handleInputChange1(event) {
        console.log(event);
        var formData= handleInputChange(event);
        uploadImg(formData);

    }
    function handleInputChange2(event){
       const file = event.target.files[0];
       var url = selectVideoFile(file);
            if (url) {
                var srcNew = "<source id='v1' src='"+url+"' ></source>";
                $("#video").append(srcNew)
            }
            var video_content = document.getElementById('video')
            setMedia(video_content)
        var formData= handleInputChangebyVideo(event);
        $.ajax({
            type: 'POST',
            url: "{:url('upload/index')}",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (Json) {
                if (Json.code == 200) {
                    var $Blob= getBlobBydataURI(video_poster,'image/png'); 
                    var fm = new FormData()
                    fm.append("avatar", $Blob ,"file_"+Date.parse(new Date())+".png");
                    $.ajax({
                        type: 'POST',
                        url: "{:url('upload/index')}",
                        data: fm,
                        processData: false,
                        contentType: false,
                        cache: false,
                        // dataType: 'json',
                        success: function (Json) {
                            console.log('feng-main',Json)
                            if (Json.code == 200) {
                                var html = '<li class="uploader-file" style="background-image:url('+Json.data.url+'")">'+'</li>'
                                $('#uploader-videos').append(html)
                            } else {
                                $.alert('保存失败');
                            }
                        }
                    });
                } else {
                    $.alert('上传失败');
                }
            }
        });
    }
    function handleInputChange3(event){
        const file = event.target.files[0];
        var formData= handleInputChangebyFile(event);
        $.ajax({
            type: 'POST',
            url: "{:url('upload/index')}",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (Json) {
                if (Json.code == 200) {
                    var url=decodeURI(Json.data.url)
                    var obj=url.lastIndexOf("/");
                    var name =url.substr(obj+1);
                    a="<li class=\"uploader-file\" style=\"background-image:url('/static/wx/imgs/img/text.jpg')\">";
                    a+= "<span class=\"close\"  onclick='deleteT(this)>x</span>"
                    a+="<a href='"+url+ "' download>"+ name+"</a>"
                    a+= "</li>"
                    $('#uploader-files').append(a);
                } else {
                    $.alert('上传失败');
                }
            }
        });
    }
    // 上传图片
    function  uploadImg (formData) {
        $.ajax({
            type: 'POST',
            url: "{:url('upload/index')}",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (Json) {
               console.log(Json.data)
                if (Json.code == 200) {
                    url=decodeURI(Json.data.url)
                    a="<li class=\"uploader-file\" style=\"background-image:url('"+url+"')\">";
                    a+= "<span class=\"close\" onclick='deleteT(this) '>x</span>"
                    a+= "</li>"
                    $('#uploader-imges').append(a);
                } else {
                    $.alert('上传失败');
                }
            }
        });
    }
    function deleteT(obj) {
        $(obj).parent('li').remove();
    }


    // // 上传视频
    // var videoFile = document.getElementById('y')
    // function getFileURL(file) {
    //
    //     var getUrl = null;
    //     if (window.createObjectURL != undefined) { // basic
    //         getUrl = window.createObjectURL(file);
    //     } else if (window.URL != undefined) { // mozilla(firefox)
    //         getUrl = window.URL.createObjectURL(file);
    //     } else if (window.webkitURL != undefined) { // webkit or chrome
    //         getUrl = window.webkitURL.createObjectURL(file);
    //     }
    //     return getUrl;
    // }
    // $("#video").hide()
    // var selectFile = function() {  //获取视频的大小 ：this.files[0].size
    //     var url = getFileURL(this.files[0]);//把当前的 files[0] 传进去
    //     if (url) {
    //         var srcNew = "<source id='v1' src='"+url+"' ></source>";
    //         $("#video").append(srcNew)
    //     }
    //     $("#videoImg").hide()
    //     $("#video").show()
    // }
    // videoFile.addEventListener('change', selectFile)

</script>
</body>

</html>